<template>
  <el-select
    :model-value="modelValue"
    placeholder="请选择分类"
    @change="selectFn"
  >
    <el-option
      v-for="item in typesList"
      :key="item.id"
      :label="item.name"
      :value="item.id"
      :disabled="item.a_show != '1'"
    />
  </el-select>
</template>

<script lang="ts" setup>
import { post } from "@/common/http";
import type { typeItemTypeName, typeItem } from "@/common/interface";
const emit = defineEmits<{
  (e: "update:modelValue", data: number): void; //向父组件更新排序或删除的数据
}>();

interface IProps {
  modelValue: string;
  type: typeItemTypeName;
}
const props = defineProps<IProps>();

const typesList = ref<typeItem[]>(); //分类列表

post("api/Type/list_data_a", {
  type: props.type,
  page: 1,
  sortField: "id",
  sort: "desc",
  limit: 9999,
}).then((res) => {
  let list:typeItem[] = []
  res.data.forEach((v: typeItem) => {
    if (v.pid === 0) {
      list.push(v)
      res.data.forEach((val: typeItem) => {
        if (v.id === val.pid) {
          list.push({
            ...val,
            name:'|——  '+val.name
          })
        }
      });
    }
  });
  typesList.value = list;
});

function selectFn(data: number) {
  emit("update:modelValue", data);
}
</script>
